<!--
 Copyright (C) 2016-2023 Jones Magloire @Joxit

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<change-registry-url>
  <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
    <div class="material-popup-title">Change your Server ?</div>
    <div class="material-popup-content">
      <select>
        <option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
      </select>
    </div>
    <div class="material-popup-action">
      <material-button
        class="dialog-button"
        waves-color="var(--hover-background)"
        onClick="{ change }"
        color="inherit"
        text-color="var(--primary-text)"
      >
        Change
      </material-button>
      <material-button
        class="dialog-button"
        waves-color="var(--hover-background)"
        onClick="{ props.onClose }"
        color="inherit"
        text-color="var(--primary-text)"
      >
        Cancel
      </material-button>
    </div>
  </material-popup>
  <script>
    import { addRegistryServers, getRegistryServers } from '../../scripts/utils';
    import router from '../../scripts/router';
    export default {
      change(event) {
        const select = this.$('select');
        if (!select || !select.value || select.value.length === 0) {
          return this.props.onNotify('The select field is empty. Please add an url.', true);
        }
        if (!select.value.startsWith('http')) {
          return this.props.onNotify('The select field should start with http:// or https://.', true);
        }
        const url = addRegistryServers(select.value);
        router.home();
        this.props.onServerChange(url);
        this.props.onClose();
        setTimeout(() => router.updateUrlQueryParam(url), 100);
      },
      getRegistryServers,
    };
  </script>
  <style>
    :host select {
      position: relative;
      outline: 0;
      box-shadow: none;
      padding: 0;
      width: 100%;
      background: 0 0;
      border: none;
      font-weight: 400;
      font-size: 1em;
      line-height: 24px;
      height: 24px;
      border-bottom: 1px solid var(--accent-text);
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      margin: 1.5em 0;
      color: var(--primary-text);
    }
    :host select option {
      background-color: var(--background);
    }
  </style>
</change-registry-url>
